<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="../css/project.css">

    <script src="../js/libs/jquery-3.0.0.min.js"></script>
    <script src="../js/libs/jquery-weui.min.js"></script>
    <script src="../js/libs/vue2.0.js"></script>
    <script src="../js/libs/parsley.min.js"></script>
    <script src="../js/project.js"></script>
    <style>
        /* 功能样式 */
        /* 验证成功时 */
        input.parsley-success, select.parsley-success, textarea.parsley-success {
            color: #468847;
            background-color: #DFF0D8;
            border: 1px solid #D6E9C6;
        }
        /* 验证失败时 */
        .parsley-error{
            color: #B94A48;
            background-color: #F2DEDE;
            border: 1px solid #EED3D7;
        }

        /* 基本样式 */
        label{display: block;font-size: 16px;line-height: 1.6em;}
    </style>
</head>
<body>
<div id="app">

    <form id="demo-form" data-parsley-validate="">
        <label >姓名 * :
            <input type="text" class="form-control" name="fullname" required="">
        </label>

        <label >邮箱 * :
        <input type="email" class="form-control" name="email" data-parsley-trigger="change" required="">
        </label>

        <label >性别 *:</label>
        <p>
            男: <input type="radio" name="gender" id="genderM" value="M" required="">
            女: <input type="radio" name="gender" id="genderF" value="F">
        </p>
        <label >爱好 (可选项, 最少两项): </label>
        <p>
            滑雪 <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2"><br>
            运动 <input type="checkbox" name="hobbies[]" id="hobby2" value="run"><br>
            吃饭 <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br>
            睡觉 <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br>
            阅读 <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br>
            写代码 <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br>
        </p>

        <p>
            <label for="heard">国籍*:</label>

            <select id="heard" required="">
                <option value="">中国</option>
                <option value="press">美国</option>
                <option value="net">加拿大</option>
                <option value="mouth">土耳其</option>
                <option value="other">南斯拉夫</option>
            </select>
        </p>

        <p>
            <label for="message">备注 (大于20, 小于100) :</label>
            <textarea id="message" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea>
        </p>

        <br>
        <input type="submit" class="btn btn-default" value="验证">

    </form>

</div>
<script type="text/javascript">
    $(function () {
        $('#demo-form').parsley().on('field:validated', function() {
                    var ok = $('.parsley-error').length === 0;
                    $('.bs-callout-info').toggleClass('hidden', !ok);
                    $('.bs-callout-warning').toggleClass('hidden', ok);
                })
                .on('form:submit', function() {
                    return false; // Don't submit form for this demo
                });
    });
</script>

</body>
</html>